<template>
  <div>
    <div class="box" @click="$router.push('/postDetail/' + Postdata.id)">
      <div
        v-if="
          Postdata.type == 1 &&
          Postdata.cover.length > 0 &&
          Postdata.cover.length < 3
        "
      >
        <div class="big">
          <div class="min">
            <div class="title">{{ Postdata.title }}</div>
            <div class="info">
              {{ Postdata.user.nickname }} &nbsp;&nbsp;&nbsp;{{
                Postdata.comment_length
              }}跟帖
            </div>
          </div>
          <img :src="interceptor(Postdata.cover[0].url)" alt="" />
        </div>
      </div>
      <div
        v-if="
          Postdata.type == 1 &&
          Postdata.cover.length >= 3 &&
          Postdata.cover.length > 0
        "
        class="second"
      >
        <div class="title">
          {{ Postdata.title }}
        </div>

        <div class="imges">
          <img :src="interceptor(Postdata.cover[0].url)" alt="" />
          <img :src="interceptor(Postdata.cover[1].url)" alt="" />
          <img :src="interceptor(Postdata.cover[2].url)" alt="" />
        </div>
        <div class="info">
          {{ Postdata.user.nickname }}&nbsp;&nbsp;&nbsp;{{
            Postdata.comment_length
          }}跟帖
        </div>
      </div>

      <div v-if="Postdata.type == 2 && Postdata.cover.length > 0" class="video">
        <div class="title">
          {{ Postdata.title }}
        </div>

        <div class="imges">
          <img :src="interceptor(Postdata.cover[0].url)" alt="" />
          <span class="iconfont iconshipin"></span>
        </div>
        <div class="info">
          {{ Postdata.user.nickname }} {{ Postdata.comment_length }}跟帖
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["Postdata"],

  //   拦截器
  methods: {
    interceptor(Onurl) {
      if (Onurl.indexOf("http") > -1) {
        return Onurl;
      } else {
        return this.$axios.defaults.baseURL + Onurl;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  .big {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    border-bottom: #ccc solid 2px;
    .min {
      padding: 10/360 * 100vw 0;
      margin: 10/360 * 100vw;
    }
    .info {
      padding-top: 25/360 * 100vw;
      font-size: 14px;
      color: #ccc;
    }
    img {
      padding: 20/360 * 100vw;
      width: 121/360 * 100vw;
      height: 75/360 * 100vw;
    }
  }
  .second {
    margin: 10/360 * 100vw;
    border-bottom: #ccc solid 2px;
    .imges {
      display: flex;
      justify-content: space-around;
      margin: 10/360 * 100vw 0;
      img {
        width: 112/360 * 100vw;
        height: 75/360 * 100vw;
      }
    }
    .info {
      font-size: 14px;
      color: #ccc;
      padding: 0 10/360 * 100vw 10/360 * 100vw 10/360 * 100vw;
    }
  }
  .video {
    border-bottom: solid #cccccc 2px;
    .title {
      padding: 10/360 * 100vw;
      padding-bottom: 0;
    }
    .imges {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 5/360 * 100vw 0;
      img {
        padding: 10/360 * 100vw;
        width: 340/360 * 100vw;
        height: 170/360 * 100vw;
      }
    }
    .info {
      font-size: 14px;
      color: #ccc;
      padding: 0 10/360 * 100vw 10/360 * 100vw 10/360 * 100vw;
    }
    .iconshipin {
      color: #fff;
      padding: 8/360 * 100vw;
      font-size: 30/360 * 100vw;
      position: absolute;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.26);
    }
  }
}
</style>